import { useState, useEffect, useCallback } from 'react'
import { postCompanyInfoDetailFinanceProcess } from '@/api/companyDetail/CompanyDevelopment.ts'
import { initPageType, usePageChange } from '@hs-admin/utils'
import { Table } from 'antd'
import { hsHandleMoneyShow } from 'hs-react-company'
import './financingProcess.css'

const columns = [
  {
    title: '披露日期',
    key: 'financingDate',
    render: (row) => <span>{row.financingDate || '--'}</span>
  },
  {
    title: '融资轮次',
    key: 'financingRoundStd',
    render: (row) => <span>{row.financingRoundStd || '--'}</span>
  },
  {
    title: '融资金额',
    key: 'financingAmtCal',
    render: (row) => <span>{hsHandleMoneyShow(row.financingAmtCal) || '--'}</span>
  },
  {
    title: '投资方',
    width: 600,
    key: 'investCompanyName',
    render: (row) => <span>{row.investCompanyName || '--'}</span>
  }
]

const initPage: initPageType = {
  current: 1,
  total: 0,
  pageSize: 10,
  morePageOptions: {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => `共 ${total} 条数据`,
    pageSizeOptions: [10, 20, 30, 40]
  }
}

const FinancingProcess = ({ companyCode }: { companyCode: string }) => {
  const [data, setData] = useState([])
  const [count, setCount] = useState(0)
  const doRequest = useCallback(
    async (page: number, pageSize: number) => {
      const params = {
        companyCode,
        current: page,
        pageSize
      }
      const res = await postCompanyInfoDetailFinanceProcess(params)
      setData(res.list ?? [])
      setCount(res.total)
      return res.total ?? 0
    },
    [companyCode]
  )

  const { pagination, resetPageAndTriggerRequest } = usePageChange(initPage, doRequest)

  useEffect(() => {
    resetPageAndTriggerRequest()
  }, [resetPageAndTriggerRequest])

  return (
    <>
      {data.length > 0 ? (
        <div id="融资历程" className="financingProcess" data-count={count}>
          <div className="financingProcessTitle">融资历程</div>
          <Table
            columns={[
              {
                title: '序号',
                width: 80,
                render: (_, __, index) => <span>{index + 1 + (pagination.current - 1) * pagination.pageSize}</span>
              },
              ...columns
            ]}
            rowKey={(record) => `${record.financingDate}${record.financingRoundStd}`}
            dataSource={data}
            pagination={pagination}
          />
        </div>
      ) : null}
    </>
  )
}

export default FinancingProcess
